<template>
  <div class="progress-circle">
    <svg :width="radius" :height="radius" viewBox="0 0 70 70" version="1.1">
      <circle class="progress-background" r="35" cx="35" cy="35" fill="transparent"/>
      <circle class="progress-bar" r="35" cx="35" cy="35" fill="transparent" :stroke-dasharray="dashArray"
              :stroke-dashoffset="dashOffset"/>
    </svg>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    props: {
      radius: {
        type: Number,
        default: 70
      },
      percent: {
        default: 0
      }
    },
    data() {
      return {
        dashArray: Math.PI * 70
      }
    },
    computed: {
      dashOffset() {
        // console.log(this.percent)
        // console.log(this.dashArray)
        let percentData=this.percent/100
        return (1 - percentData) * this.dashArray
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">

  .progress-circle
    position: relative;
    margin-bottom:8px;
    circle
      stroke-width: 8px
      transform-origin: center
      &.progress-background
        transform: scale(0.9)
        stroke: #f2f2f2
      &.progress-bar
        transform: scale(0.9) rotate(-90deg)
        stroke: #30C060
</style>